import BaseView from '../baseView.js';

export default class AddCinema extends BaseView {
    render() {
        $('#Content').html(`
            <div>
                <div style="margin: 30px 10px 0 20px ">
                <span class="layui-breadcrumb" style="visibility:visible;">
                    <a>猫眼后台管理系统</a>
                    <a>影院管理</a>
                    <a>添加影院信息</a>
                </span>
                <hr/>
                </div>
                <div>
                <form class="layui-form" id='resetForm'>
                <div class="layui-form-item">
                <label class="layui-form-label">影院名称：</label>
                    <div class="layui-input-block">
                    <input type="text" id="name" required   placeholder="请输入影院名称"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                <label class="layui-form-label">影院地址：</label>
                    <div class="layui-input-block">
                    <input type="text" id="address" required   placeholder="请输入影院地址"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                <label class="layui-form-label">联系方式：</label>
                    <div class="layui-input-block">
                    <input type="text" id="phone" required   placeholder="请输入联系方式"  class="layui-input">
                    </div>
                </div>
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否营业：</label>
                        <div class="layui-input-block">
                            <select id="statuselect" name="状态" lay-verify="required">
                            <option value="0"></option>
                            <option value="是">是</option>
                            <option value="否">否</option>
                            </select>
                        </div>
                    </div>
                </form>
                <!-- 上传图片 -->
                <div class="layui-upload" style="margin-left: 112px;margin-top: 10px;margin-bottom: 30px;">
                <button type="button" class="layui-btn" id="upload_test"><i class="layui-icon">&#xe67c;</i>上传图片</button>
                <div class="layui-upload-list" style="width: 100px;height:100px;border: 1px solid hotpink;">
                    <img class="layui-upload-img" id="demo1" style="width: 100px;height:100px;">
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
                <!-- 进度条 -->
                <a name="list-progress"> </a>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                    <button type='button' id='addstudentBtn' class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
                    <button type="reset" id='resetBtn' class="layui-btn layui-btn-primary">重置</button>
                    <button type="button" id='goToStudentListBtn' class="layui-btn layui-btn-warm">返回</button>
                    </div>
                </div>
                </form>
                </div>
            </div>

            <script>
            layui.use('form', function(){
            var form = layui.form;
            //获得表单
            myform = form
            //重新渲染表单
            form.render();
            });
            </script>
        `);
    }

    handle() {

        layui.use(['upload', 'element', 'layer'], function () {
            var $ = layui.jquery
                , upload = layui.upload
                , element = layui.element
                , layer = layui.layer;

            //常规使用 - 普通图片上传
            var uploadInst = upload.render({
                elem: '#upload_test'
                , url: '/cinema/addcinema' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                , auto: false   //不自动上传
                , bindAction: '#addstudentBtn'    //绑定一个按钮来触发上传
                // 传入的其他的参数（除了文件以外的参数）
                , data: {
                    name: () => $('#name').val(),
                    address: () => $('#address').val(),
                    phone: () => $('#phone').val(),
                    status: () => $('#statuselect').val()
                }
                , choose: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });

                    element.progress('demo', '100%'); //进度条复位
                    layer.msg('上传中', { icon: 16, time: 1000 });
                }
                , done: function (res) {
                    console.log(res);
                    //如果上传失败
                    if (res.code) {
                        layer.msg(res.msg);
                        window.location.hash = "#/main/showall";
                    } else {
                        layer.msg('上传失败');
                        $('#demoText').html(''); //置空上传失败的状态
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
                //进度条
                , progress: function (n, elem, e) {
                    element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', { icon: 1 });
                    }
                }
            });
        });



        //绑定添加事件
        // $("#addstudentBtn").click(() => {
        //     $.ajax({
        //         type: "post",
        //         url: "/cinema/addcinema",
        //         data: {
        //             "name": $("#name").val(),
        //             "address": $("#address").val(),
        //             "phone": $("#phone").val(),
        //             "status": $("#statuselect").val()
        //         },
        //         dataType: "json",
        //         success: (data) => {
        //             //console.log(data)
        //             if (data.code == 1) {
        //                 layer.msg(data.msg);
        //                 window.location.hash = "#/main/showall";
        //             } else {
        //                 layer.msg(data.msg);
        //             }
        //         }
        //     })
        // });

        //重置按钮
        $("#resetBtn").click(() => {
                // 清空表单数据
                $("#resetForm")[0].reset();
                // layui.form.render();
        })
        //返回
        $("#goToStudentListBtn").click(() => {
            window.location.hash = "#/main/showall";
        })
    }
}



{/* <script>
layui.use(['upload', 'element', 'layer'], function () {
    var $ = layui.jquery
        , upload = layui.upload
        , element = layui.element
        , layer = layui.layer;

    //常规使用 - 普通图片上传
    var uploadInst = upload.render({
        elem: '#upload_test'
        , url: '/cinema/addcinema' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        , auto: false   //不自动上传
        , bindAction: '#addstudentBtn'    //绑定一个按钮来触发上传
        // 传入的其他的参数（除了文件以外的参数）
        , data: {
            name: () => $('#name').val(),
            address: () => $('#address').val(),
            phone: () => $('#phone').val(),
            status: () => $('#statuselect').val()
        }
        , choose: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
                $('#demo1').attr('src', result); //图片链接（base64）
            });

            element.progress('demo', '100%'); //进度条复位
            layer.msg('上传中', { icon: 16, time: 1000 });
        }
        , done: function (res) {
            console.log(res);
            //如果上传失败
            if (res.code) {
                return layer.msg('上传成功');
                window.location.hash = "#/main/showall";
            } else {
                return layer.msg('上传失败');
                $('#demoText').html(''); //置空上传失败的状态
            }
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
        //进度条
        , progress: function (n, elem, e) {
            element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
            if (n == 100) {
                layer.msg('上传完毕', { icon: 1 });
            }
        }
    });
});

</script> */}